« Previous Next »

DOM Navigation and Nodes

1. Navigating Parent and Child Nodes

Find Parent Node


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <button onclick="findParentNode()">Find Parent Node</button>
        <div id="parentOutput" class="output-box">Click the button to find the parent node.</div>
        <div class="output-box">
            <div id="parentNodeDiv">
                <p id="childNode">I am a child node!</p>
            </div>
        </div>
    <Script>
                            
        function findParentNode() {
            var childNode = document.getElementById('childNode');
            var parentNode = childNode.parentNode;
            document.getElementById('parentOutput').innerText = 'Parent Node: ' + parentNode.nodeName;
        }
     </Script>
</body>
</html>
Click the button to find the parent node.

I am a child node!

Find Sibling Nodes


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <button class="btn btn-primary mb-2" onclick="findSiblingNodes()">Find Sibling Nodes</button>
        <div id="siblingOutput" class="output-box">Click the button to find sibling nodes.</div>
            <div class="output-box">
                <div>
                <p> I am the first sibling.</p>
                <p id="siblingNode">I am the current node!</p>
                <p>I am the last sibling.</p>
            </div>
    </div>
    <Script>
        function findSiblingNodes() {
            var currentNode = document.getElementById('siblingNode');
            var previousNode = currentNode.previousElementSibling;
            var nextNode = currentNode.nextElementSibling;
            var output = 'Previous Sibling: ' + (previousNode ? previousNode.innerText : 'None') + '\n' +
            'Next Sibling: ' + (nextNode ? nextNode.innerText : 'None');
            document.getElementById('siblingOutput').innerText = output;
        }
    </Script>
</body>
</html>
Click the button to find sibling nodes.

I am the first sibling.

I am the current node!

I am the last sibling.

Find Text Node


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <button onclick="findTextNode()">Find Text Node</button>
        <div id="textNodeOutput" class="output-box">Click the button to find the text node.</div>
        <div class="output-box">
            <div id="textNode">This is a text node!</div>
    </div>
    <Script>
        function findTextNode() {
            var textNode = document.getElementById('textNode').firstChild;
            document.getElementById('textNodeOutput').innerText = 'Text Node: ' + textNode.nodeValue;
        }
    </Script>
</body>
</html>
Click the button to find the text node.
This is a text node!
« Previous Next »